<template>
	<coreshop-page title="收藏" mode="left">
		<view class="m-25">
			<view v-if="state.list.length > 0">
				<view class="item-box" v-for="item, index in state.list" :key="index"
					@click="handleRouteNavigateTo(`/pages/goods/detail?id=${item.goodsId}`)">
					<coreshop-goods-card type="horizontal" :nameOverflow="2" imgHeight="140rpx" imgWidth="140rpx"
						:goodsData="hanldeCombinationGoodsData(item)">
						<template #goodPrice>
							<view class="time-box">
								<uv-icon name="clock" color="#979797" size="16"></uv-icon>
								<view class="time">{{ item.createTime }}</view>
							</view>
						</template>
					</coreshop-goods-card>
					<view class="btn-box">
						<view class="collection" @click.stop="handleCanacelCollection(item.goodsId)">
							<uv-icon name="heart-fill" color="#979797" size="18"></uv-icon>
							<text class="tit">取消收藏</text>
						</view> 
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.collect" text="暂无收藏"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { onReachBottom } from '@dcloudio/uni-app';
	import { queryGoodscollectionList ,queryGoodsCollection} from '@/core/api';
	import type { Response } from '@/core/models';
	import { EmptyEnum } from '@/core/enum';
	import { handleRouteNavigateTo } from '@/core/utils';
	import { handleShowToast } from '@/core/utils';
	
	const state = reactive<{
		list : Array<any>;
		totalPages : number;
		page : number;
		limit : number;
	}>({
		list: [],
		totalPages: 1,
		page: 1,
		limit: 10,
	})

	onMounted(() => {
		/** 获取商品收藏列表 */
		getGoodscollectionList()
	});
	
	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getGoodscollectionList();
		}
	})
	
	/** 获取商品收藏列表 */
	const getGoodscollectionList = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const goodscollectionList : Response<{
			count : number;
			list : Array<any>
		}> = await queryGoodscollectionList({
			page: state.page,
			limit: state.limit,
		})
		state.totalPages = Math.ceil(goodscollectionList.data?.count / state.limit);
		state.list = state.list.concat(goodscollectionList.data?.list);
		uni.hideLoading();
	}

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.goodsId,
			image: item.goods.image,
			name: item.goodsName,
			brief: '',
		}
	}
	
	/** 取消收藏 */
	const handleCanacelCollection = async (id : number) => {
		const goodsCollection : Response<any> = await queryGoodsCollection({ id, });
		if (goodsCollection.status) {
			handleShowToast(goodsCollection.msg, 'success', () => {
				setTimeout(() => {
					state.page = 1;
					state.list = [];
					getGoodscollectionList();
				}, 1000)
			})
		} else {
			handleShowToast(goodsCollection.msg)
		}
	}
</script>
<style lang="scss" scoped>
	@import './collection.scss';
</style>